import React, { Component } from 'react';
import {Table,Popconfirm ,Pagination, Button} from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import EditModal from './EditModal';
import { PAGE_SIZE } from '../../constants';
import './UserTable.css';


class UserTable extends Component {
	state = {
	    selectedRowKeys: [],
	    loading: false,
	};
	createHandler=(values)=>{
	  	this.props.dispatch({
	      type: 'comList/create',
	      payload: values,
	    });
	  }
	  editHandler=(id, values)=>{
	    this.props.dispatch({
	      type: 'comList/patch',
	      payload: { id, values },
	    });
	  }
	  deleteHandler=(id)=>{
	    this.props.dispatch({
	      type: 'comList/remove',
	      payload: id,
	    });
	  }
	  pageChangeHandler=(page)=>{
	  	this.props.dispatch(routerRedux.push({
	      pathname: '/comList',
	      query: { page },
	    }));
	  }
	  onSelectChange = (selectedRowKeys) => {
	    console.log('selectedRowKeys changed: ', selectedRowKeys);
	    this.setState({ selectedRowKeys });
	  }
	  allHangdlerA=(datas)=>{
	  	console.log(this.state.selectedRowKeys);
	  	this.setState({ loading: true });
	  	setTimeout(() => {
	      this.setState({
	        selectedRowKeys: [],
	        loading: false,
	      });
	    }, 1000);
	  }
	  
	render(){
		const columns = [
		  {
		    title: 'Name',
		    dataIndex: 'name',
		    key: 'name',
		    className:'bg-white',
		    render: text => <a href="#Self">{text}</a>,
		  }, 
			{
			  title: 'Email',
			  dataIndex: 'email',
			  key: 'email',
		    className:'bg-white',
			},
			{
			  title: 'Website',
			  dataIndex: 'website',
			  key: 'website',
		    className:'bg-white',
			},
			{
			  title: 'Operation',
			  key: 'operation',
		      className:'bg-white',
			  render: (text, record) => (
			    <span>
			      <EditModal record={record} onOk={this.editHandler.bind(null, record.id)}>
			        <a className="edit-btn">编辑</a>
			      </EditModal>
			      <Popconfirm title="Confirm to delete?" onConfirm={this.deleteHandler.bind(null, record.id)}>
			        <a href="" className="delete-btn">删除</a>
			      </Popconfirm>
			    </span>
			  ),
			},
		]
		const {loading,selectedRowKeys } = this.state;
		const rowSelection = {
	      selectedRowKeys,
	      onChange: this.onSelectChange,
	    }
		const hasSelected = selectedRowKeys.length > 0;
		
		const  footerToolHangdler=()=>{
		  	return (
		  		<div>
		  		<Button type="primary"  onClick={this.allHangdlerA.bind(selectedRowKeys)} disabled={!hasSelected} loading={loading}>
	            	全选操作A
	          	</Button>
		  		<Button type="default"  onClick={this.allHangdlerB} disabled={!hasSelected} loading={loading}>
	            	全选操作B
	          	</Button>
	          	</div>
		  	)
		  }
		return (
			<div className="edit-tool">
				<div className="create-user-button">
			      <EditModal record={{}} onOk={this.createHandler}>
			        <Button type="primary">创建用户</Button>
			      </EditModal>
			    </div>
				<Table columns={columns} rowSelection={rowSelection} footer={footerToolHangdler}  dataSource={this.props.list} rowKey={record => record.id} pagination={false}  loading={this.props.loading}/>
				<Pagination
		          className="ant-table-pagination"
		          total={this.props.total}
		          current={this.props.page}
		          pageSize={PAGE_SIZE}
		          onChange={this.pageChangeHandler}
		        />
			</div>
		)
	}
}

function mapStateToProps( state ) {
	const { list, total, page } = state.comList;
  return {
  	loading: state.loading.models.comList,
    list,
    total,
    page,
  };
}
export default connect(mapStateToProps)(UserTable);
